<template>
  <div>
    <anovPart
      v-for="(item, idx) in anovParts"
      :part="item"
      :key="idx"
      :anovFile="anovFile"
    ></anovPart>
  </div>
</template>
<script>
import anovPart from './anovPart'
import partServer from '../utils/partServer'
import animateServer from '../utils/animateServer'
import pageServer from '../utils/pageServer'

export default {
  name: 'anovPage',
  computed: {
    anovParts() {
      let currentPath = this.$route.path
      let page = pageServer.getPageByPath(currentPath)
      return page.parts
    }
  },
  props: {
    anovFile: {
      type: String,
      required: true
    }
  },
  methods: {
    // 页面进场
    enter(e) {
      e && e.next()
      this.$nextTick(() => {
        let path = this.$route.path
        let tlConfig = pageServer.getPageByPath(path).tlConfig
        let tlEnter =
          animateServer.getCurrentRouteTl('enter') ||
          animateServer.createTl({ tlConfig, path })
        let labelsArray = tlEnter.getLabelsArray()
        let anovParts = partServer.getCompByTagName('anovPart')
        anovParts.forEach((part, i) => {
          let label = labelsArray.find(label => label.name === part.$el.id)
          let time = (label && label.time) || (5 * i) / 10
          try {
            let tl
            tlEnter.add((tl = part.init()), time).timeScale(1)
            if (!(tl instanceof TimelineLite || tl instanceof TweenLite)) {
              console.warn(
                `${
                  part.$el.id
                } the init method did not return a tiemline or tween`
              )
            }
          } catch (error) {
            console.warn(
              `${
                part.$el.id
              } the init method did not return a tiemline or tween`
            )
          }
        })
      })
    },
    // 页面退场
    leave(e) {
      if (!e) return
      let tl = animateServer.getCurrentRouteTl('enter')
      if (!tl) return
      let timeScale = pageServer.getPageByPath(e.from.path).reverseTimeScale
      tl.eventCallback('onReverseComplete', () => {
        tl.reversed(false).clear(false)
        TweenMax && TweenMax.killAll()
        e.next()
      })
      tl.timeScale(timeScale).reverse()
    }
  },
  components: { anovPart }
}
</script>

<style>
*,
:after,
:before {
  box-sizing: border-box;
}
</style>
